<template>
  <div
    id="itemPanel"
    ref="itemPanel"
    :class="{'hidden': itemVisible}"
  >
    <i class="iconfont icon-h-drag"/>
    <el-input
      v-model="searchInput"
      style="margin: 5px; width: 96%"
      clearable
      placeholder="请输入服务名称"
      prefix-icon="el-icon-search"
      @input="handleSearch"
    >
    </el-input>
    <el-tabs v-model="activeName" @tab-click="handleClick" type="card"
    >
      <el-tab-pane label="服务包" name="package">
        <div class="icon-tool icon-tool1">
          <!--          <div v-infinite-scroll="load"-->
          <!--               :infinite-scroll-disabled="disabled"-->
          <!--               style="height: 150px; overflow: auto;"-->
          <!--               infinite-scroll-immediate="false"-->
          <!--          >-->
          <!--            <i v-for="(item, index) in configList"-->
          <!--               :key="item.id"-->
          <!--               class="node warning"-->
          <!--               draggable="true"-->
          <!--               :data-label="item.appZhname"-->
          <!--               data-shape="rect-node"-->
          <!--               fill="#eef5fe"-->
          <!--            >-->
          <!--              <el-row :gutter="10">-->
          <!--                <el-col :span="18">-->
          <!--                  {{ item.appZhname }}-->
          <!--                </el-col>-->
          <!--                <el-col :span="6">-->
          <!--                  <i class="fa fa-star" v-if="item.favoriteIndicator === 'true'" style="font-size: 20px;"></i>-->
          <!--                  <i class="fa fa-star-o" v-if="item.favoriteIndicator === 'false'" style="font-size: 20px;"></i>-->
          <!--                </el-col>-->
          <!--              </el-row>-->
          <!--            </i>-->
          <!--            <p v-if="loading">加载中...</p>-->
          <!--            <p v-if="noMore">没有更多了</p>-->
          <!--            &lt;!&ndash;            <i class="split"/>&ndash;&gt;-->
          <!--          </div>-->
          <div style="overflow-y: auto; max-height: 75vh;">
            <ul
              v-infinite-scroll="load"
              :infinite-scroll-disabled="disabled">
              <li>
                <i v-for="item in configList"
                   :key="item.id"
                   class="node warning"
                   draggable="true"
                   :data-label="item.appZhname"
                   data-shape="rect-node"
                   fill="#eef5fe"
                >
                  <el-row :gutter="10">
                    <el-col :span="18">
                      {{ item.appZhname }}
                    </el-col>
                    <el-col :span="6">
                      <i class="fa fa-star" v-if="item.favoriteIndicator === 'true'" style="font-size: 20px;"></i>
                      <i class="fa fa-star-o" v-if="item.favoriteIndicator === 'false'" style="font-size: 20px;"></i>
                    </el-col>
                  </el-row>
                </i>
              </li>
            </ul>
            <p v-if="loading">加载中...</p>
            <p v-else-if="noMore">没有更多了</p>
            <!--            <p v-if="noMore">没有更多了</p>-->
          </div>
        </div>
      </el-tab-pane>
      <!--      <el-tab-pane label="中间件" name="middleware">-->
      <!--      </el-tab-pane>-->
      <el-tab-pane label="云原生" name="yaml">
        <div class="icon-tool icon-tool2">
          <div style="overflow-y: auto; max-height: 75vh;">
            <ul
              v-infinite-scroll="yamlLoad"
              :infinite-scroll-disabled="yamlDisabled">
              <li>
                <i v-for="(item, index) in configList"
                   :key="item.id"
                   class="node warning"
                   draggable="true"
                   :data-label="item.appZhname"
                   data-shape="rect-node"
                   fill="#eef5fe"
                >
                  {{ item.appZhname }}
                </i>
              </li>
            </ul>
            <p v-if="yamlLoading">加载中...</p>
            <p v-else-if="yamlNoMore">没有更多了</p>
            <!--            <p v-if="yamlNoMore">没有更多了</p>-->
          </div>
          <!--          <i class="split"/>-->
        </div>
      </el-tab-pane>
    </el-tabs>
    <i
      draggable="true"
      class="gb-toggle-btn"
      @click="itemVisible = !itemVisible"
    />
  </div>
</template>

<script>
  export default {
    name: 'ItemPanel',
    props: ["graph"],
    data() {
      return {
        itemVisible: false,
        searchInput: "",
        configList: [],
        allConfigList: [],
        // 用于服务列表搜索
        tmpPage: {
          pageSize: 15,
          pageNum: 1,
          filterKey: "",
        },
        selectTabs: 0,
        activeName: 'package',
        loading: false,
        yamlLoading: false,
        isFull: false,
      };
    },
    computed: {
      noMore() {
        return this.isFull
      },
      disabled() {
        return this.loading || this.noMore
      },
      yamlNoMore() {
        return this.isFull
      },
      yamlDisabled() {
        return this.yamlLoading || this.yamlNoMore
      },
    },
    mounted() {
      // let icons = [];
      // this.$nextTick(() => {
      //   icons = [...this.$refs.itemPanel.querySelector('.icon-tool').querySelectorAll('.node')];
      //   console.log(icons);
      //
      //   icons.forEach(icon => {
      //     icon.addEventListener('dragstart', event => {
      //       const shape = icon.getAttribute('data-shape');
      //       const label = icon.getAttribute('data-label');
      //       const fill = icon.getAttribute('fill');
      //
      //       /* 设置拖拽传输数据 */
      //       event.dataTransfer.setData('dragComponent',
      //         JSON.stringify({
      //           label,
      //           shape,
      //           fill,
      //         }),
      //       );
      //     });
      //   });
      // })

      // 阻止默认动作
      document.addEventListener('drop', e => {
        e.preventDefault();
      }, false);
      this.initPackageList();
    },
    methods: {
      load() {
        this.loading = true;
        this.tmpPage.pageSize += 10;
        this.initPackageList();
        setTimeout(() => {
          this.loading = false;
        }, 2000);
      },
      yamlLoad() {
        this.yamlLoading = true;
        this.tmpPage.pageSize += 10;
        this.initYamlList();
        setTimeout(() => {
          this.yamlLoading = false;
        }, 2000);
      },
      initPackageList() {
        this.$appStoreApi.getAppInfoListByPage(this.tmpPage).then((res) => {
          if (res && res.code === 200) {
            // this.configList = [];
            this.allConfigList = [];
            let tmpArr = [];
            for (let i = 0; i < res.data.records.length; i++) {
              const packageInfo = res.data.records[i];
              let tmp = {};
              // tmp.label = packageInfo.appZhname;
              // tmp.shape = "rect-node";
              // tmp.fill = "#c47800";
              // tmp.packageInfo = packageInfo;
              tmp.id = packageInfo.id;
              tmp.appZhname = packageInfo.appZhname;
              tmp.appName = packageInfo.appName;
              tmp.appVersion = packageInfo.appVersion;
              tmp.appInterface = packageInfo.appInterface;
              tmp.favoriteIndicator = packageInfo.favoriteIndicator;
              tmp.type = "package";
              tmpArr.push(tmp);
              // this.configList.push(tmp);
              this.allConfigList.push(tmp);
              // this.configList.push(packageInfo);
              // this.allConfigList.push(packageInfo);
            }
            this.configList = [...tmpArr];
            this.filterPackageList();
            this.initIconsList();
            this.isFull = this.tmpPage.pageSize >= res.data.total;
          }
        });
      },
      initYamlList() {
        this.$appStoreApi.getCloudYamlPageData(this.tmpPage).then((res) => {
          // this.configList = [];
          this.allConfigList = [];
          let tmpArr = [];
          if (res && res.code === 200) {
            for (let i = 0; i < res.data.records.length; i++) {
              const packageInfo = res.data.records[i];
              let tmp = {};
              // tmp.label = packageInfo.yamlZhname;
              // tmp.shape = "rect-node";
              // tmp.fill = "#c47800";
              // tmp.packageInfo = packageInfo;
              tmp.id = packageInfo.id;
              tmp.appZhname = packageInfo.yamlZhname;
              tmp.appName = packageInfo.yamlName;
              tmp.appVersion = packageInfo.yamlVersion;
              tmp.yamlInterface = packageInfo.yamlInterface;
              tmp.type = "yaml";
              tmpArr.push(tmp);
              // this.configList.push(tmp);
              this.allConfigList.push(tmp);
              // this.configList.push(packageInfo);
              // this.allConfigList.push(packageInfo);
            }
            this.configList = [...tmpArr];
            this.filterPackageList();
            this.initIconsList();
            this.isFull = this.tmpPage.pageSize >= res.data.total;
          }
        });
      },
      initIconsList() {
        this.$nextTick(() => {
          let icons = [];
          if (this.activeName === "package") {
            icons = [...this.$refs.itemPanel.querySelector('.icon-tool1').querySelectorAll('.node')];
          } else if (this.activeName === "yaml") {
            icons = [...this.$refs.itemPanel.querySelector('.icon-tool2').querySelectorAll('.node')];
          }
          icons.forEach(icon => {
            icon.addEventListener('dragstart', event => {
              const shape = icon.getAttribute('data-shape');
              const label = icon.getAttribute('data-label');
              const fill = icon.getAttribute('fill');
              const data = this.configList.filter(res => res.appZhname === icon.getAttribute('data-label'))[0];
              /* 设置拖拽传输数据 */
              event.dataTransfer.setData('dragComponent',
                JSON.stringify({
                  label,
                  shape,
                  fill,
                  data,
                  dataType: this.activeName,
                }),
              );
            });
          });
        })
      },
      filterPackageList() {
        if (undefined !== this.graph.cfg && this.graph.cfg.data.nodes !== undefined) {
          // this.configList = [];
          this.configList = this.allConfigList.filter(
            (itemA) =>
              !this.graph.cfg.data.nodes.some((node) => node.data.id === itemA.id)
          );
          this.initIconsList();
        }
      },
      handleSearch() {
        this.configList = [];
        this.allConfigList = [];
        this.tmpPage.filterKey = this.searchInput;
        this.initPackageList();
      },
      handleClick(tab, event) {
        this.tmpPage = {
          pageSize: 15,
          pageNum: 1,
          filterKey: "",
        };
        this.configList = [];
        this.allConfigList = [];
        this.isFull = false;
        if (tab.name === "yaml") {
          this.initYamlList();
        } else if (tab.name === "package") {
          this.initPackageList();
        }
      },
    },
    // created() {
    //   this.initPackageList();
    // },
  };
</script>

<style lang="scss">
  #itemPanel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 300px;
    background: #fff;
    padding-top: 35px;
    transition: transform .3s ease-in-out;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .1);

    &.hidden {
      transform: translate(-100%, 0);
    }

    .icon-h-drag {
      position: absolute;
      top: 10px;
      left: 0;
      width: 100%;
      height: 20px;
      line-height: 20px;
      font-size: 18px;
      background: #f5f5f5;
      text-align: center;
      cursor: move;

      &:hover {
        background: #f1f1f1;
      }
    }

    .gb-toggle-btn {
      width: 10px;
      height: 20px;
      top: 50%;
      left: 100%;
      border-radius: 0 10px 10px 0;
      box-shadow: 2px 0 2px 0 rgba(0, 0, 0, .1);
      transform: translate(0, -50%);
    }

    .split {
      height: 1px;
      display: block;
      background: #e0e0e0;
      margin: 5px 0;
    }

    .icon-tool {
      padding: 10px;
      text-align: center;

      .iconfont {
        display: block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 30px;
        cursor: move;
        border: 1px solid transparent;
        margin: 0 auto;

        &:hover {
          border-color: #ccc;
        }
      }

      .node {
        display: block;
        margin-bottom: 10px;
        cursor: move;
        width: 260px;
      }

      .circle {
        height: 80px;
        line-height: 80px;
        border-radius: 50%;
        border: 1px solid #ccc;
        background: #eef5fe;
      }

      .warning {
        height: 40px;
        line-height: 40px;
        border-left: 4px solid #E6A23C;
        background: #eef5fe;
      }

      .end {
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        background: #f9e3e2;
      }
    }
  }

  ul {
    list-style: none;
    padding: 0;
  }
</style>
